<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<title></title>
	<style type="text/css">
#map {
	width:600px;
	height:500px;
	border:1px solid #f;
}
</style>
	</head>
	<body>
	<div id="map">map div</div>
	<div id="control">
	<button id="zoomButton">Zoom To 1</button>
	</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script>
(function(){
window.onload = function(){
	var mapDiv = document.getElementById("map");
	var latlng = new google.maps.LatLng(40.7257,-74.0047);
	var options = {
		zoom: 18,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
		streetViewControl: false,
		noClear: false,
		backgroundColor: '#ff0000',
		draggableCursor: 'move'
	};
	var map = new google.maps.Map(mapDiv,options);
	document.getElementById("zoomButton").onclick = function(){
		alert("current zoom level is " + map.getZoom());
		alert("current center is " + map.getCenter());
		alert("current maptypeid is " + map.getMapTypeId());
	};
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(40.7257,-74.0047),
		map: map,
		title: 'Click me',
		icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/marker80.png'
	});
	var infowindow = new google.maps.InfoWindow({
		content: 'Hello World'
	});
	google.maps.event.addListener(marker,'click',function(){
		infowindow.open(map,marker);
	});
};
})();
</script>
</body>
</html>